<template>
  <!-- 一个公司的简介 -->
  <div class="border" style="padding-top:30px;">
    <el-row :gutter="80">
      <el-col :offset="1" :span="2"> 
        <el-avatar class="border" shape="square"  style="height:60px;width:60px;" :src="company.avatar"></el-avatar>
      </el-col>
      <el-col :span="14">
        <p style="font-size: 20px;color:#534c4c;display: inline-block;line-height: 100%;vertical-align: top;"> {{company.name}}</p>
      </el-col>
    </el-row>
    <el-row>
      <el-col :offset="1"> <p style="color:#8a8585">公司简介</p></el-col>
    </el-row>
    <el-row>
      <el-col :offset="1"><p v-bind:class="{brief:true,omit: isOmit}">{{company.brief}}</p></el-col>
    </el-row>
    <el-row>
      <el-col :offset="1" :span="20">
         <div style="display: inline-block">
            <p class="in_out_date">入职日期: {{company.enterDate}}</p>
            <p class="in_out_date">离职日期: {{company.leaveDate}}</p>
          </div>
      </el-col>
    </el-row>
    <el-row >
      <el-col >
         <router-link to="fileInCompany" v-show="isOmit" style="float:right;">
          <p style="display:inline-block;font-size: 14px;color: #8a8585;padding-right:20px;">查看员工在该公司的表现</p>
        </router-link>
      </el-col>
    </el-row>
   
    <!-- <div style="margin-left:30px;">
      <el-avatar class="border" shape="square" style="height:60px;width:60px;" :src="company.avatar"></el-avatar>
      <p
        style="display: inline-block;line-height: 65px;margin:0 0 0 30px;vertical-align: top;font-size: 20px;color:#534c4c;">
        {{company.name}}</p>
    </div>
    <p v-bind:class="{brief:true,omit: isOmit}">{{company.brief}}</p>
    <div style="width:400px;display: inline-block">
      <p class="in_out_date">入职日期: {{company.enterDate}}</p>
      <p class="in_out_date">离职日期: {{company.leaveDate}}</p>
    </div>
    <router-link to="fileInCompany" v-show="isOmit">
      <p style="display: inline-block;width:200px;font-size: 14px;color: #8a8585">查看员工在该公司的表现</p>
    </router-link> -->
  </div>
</template>

<script>
  export default {
    name: "CompanyBrief",
    props: {
      company: {
        type: Object,
        require: true
      },
      isOmit: {
        type: Boolean,
        default: true
      }
    },
    data() {
      return {}
    }
  }
</script>

<style scoped>
  .border {
    box-shadow: 0 2px 8px rgba(81, 66, 66, 0.52), 0 0 6px rgba(0, 0, 0, .04);
  }

  .container {
    width: 650px;
    /*height: 240px;*/
    margin: 30px 0 0 200px;
  }

  .brief {
    /* margin: 0 0 0 30px; */
    color: #6c6868;
    /* width: 600px; */
    width: 90%;
    /* line-height: 25px; */
    margin:0;
  }
  .omit{
    display: inline-block; /*这样写有好处就是，span后面不会出现消不掉的margin-xxx填充，以前是这样的display: block;*/
    table-layout: fixed;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .in_out_date {
    /* margin-left: 30px; */
    /* width:90%; */
    font-size: 14px;
    color: #8a8585;
  }

  el-aside {
    width: 100px;
    height: 65px;
  }

  el-avatar {
    width: 65px;
    height: 65px;
  }
</style>
